import {
  ProColumns, ProFormInstance,
  ProTable,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import React, {useEffect, useRef} from 'react';


export type Props = {
  values: API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[],
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};

const UpdateModal: React.FC<Props> = (props) => {
  const {values,visible,columns,onCancel,onSubmit} =props;

  const formRef = useRef<ProFormInstance>();
  useEffect(() => {},[values])
  if(formRef){
    formRef.current?.setFieldsValue(values);
  }


  return (
    <Modal visible={visible} footer={null} onCancel={() => onCancel?.()}>
      <ProTable
        type="table"
        columns={columns}
        form={{
          initialValues: values,
        }}
        onSubmit={async (values) => {
          onSubmit?.(values);
        }}
      />
      ;
    </Modal>
  );
};

export default UpdateModal;
